<template>
  <div>
    <Title title="签约信息" style="margin-bottom: 16px;"/>
    <el-form
      ref="signUpForm"
      :rules="rules"
      :model="paramsObj"
      :label-position="showMobilePage?'left':'right'"
      class="lineHeight32"
      label-width="110px">
      <el-row class="response-el-row" type="flex">
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item label="分成说明" prop="shareRemark">
            <el-input v-model="paramsObj.shareRemark" :maxlength="256" class="width240" placeholder="请输入分成说明" size="small" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item label="公司分成比例" prop="shareRatio">
            <el-input
              v-model="paramsObj.shareRatio"
              :maxlength="9"
              class="width240"
              placeholder="请输入公司分成比例"
              size="small"
              oninput="if(value>100)value=100;if(value<0)value=0;"
              @input="numberInputChange($event, 'shareRatio')"
            >
              <span slot="suffix" style="margin-right:5px;color:#333;">%</span>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item label="达人分成比例" prop="shareRatio">
            <el-input
              v-model="paramsObj.talentSharingRatio"
              :maxlength="9"
              class="width240"
              size="small"
              disabled
              oninput="if(value>100)value=100;if(value<0)value=0;"
            >
              <span slot="suffix" style="margin-right:5px;color:#333;">%</span>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item label="返点比例" prop="returnRatio">
            <el-input
              v-model="paramsObj.returnRatio"
              :maxlength="9"
              class="width240"
              placeholder="请输入返点比例"
              size="small"
              oninput="if(value>100)value=100;if(value<0)value=0;"
              @input="numInputChange($event, 'returnRatio')"
            >
              <span slot="suffix" style="margin-right:5px;color:#333;">%</span>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item label="合作方式">
            <el-select v-model="paramsObj.cooperation" placeholder="请选择" class="width240" size="small">
              <el-option
                v-for="item in cooperationOption"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item label="签单签约经纪">
            <selectWithUserLoad
              ref="proposerRef"
              v-model="paramsObj.agentObj"
              :hide-select-list="paramsObj.agentId && paramsObj.agentName?[{id: paramsObj.agentId, userName: paramsObj.agentName}] : []"
              :multiple="false"
              :value-type="'object'"
              :show-check-user="true"
              key-name="id"
              class="width240"
              label-name="userName"
              filterable
              @change="proposerChange"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item label="签约所属部门">
            <el-cascader
              v-model="paramsObj.departmentId"
              :show-all-levels="false"
              :options="deptTreeList"
              :props="{
                emitPath:false,
                value: 'id',
                label: 'name',
                checkStrictly: true,
                multiple: false,
              }"
              filterable
              class="width240"
              placeholder="请选择"
              size="small"
            >
              <template slot-scope="{ data }">
                <el-tooltip v-if="data.name.length > 14" placement="top-start" effect="dark">
                  <div slot="content" style="max-width: 150px;">{{ data.name }}</div>
                  <span class="inline-tag ellipsisOne">{{ data.name }}</span>
                </el-tooltip>
                <span v-else>{{ data.name }}</span>
              </template>
            </el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item label="目前进度">
            <el-select v-model="paramsObj.schedule" placeholder="请选择" class="width240" size="small">
              <el-option
                v-for="item in scheduleOption"
                :key="item.value"
                :label="item.label"
                :value="item.value" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item label="进度备注">
            <el-input v-model="paramsObj.remark" :maxlength="500" class="width240" placeholder="请输入进度备注" size="small" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="responsive-col-lg-8">
          <el-form-item label="推荐理由" prop="reason">
            <el-input v-model="paramsObj.reason" :maxlength="500" class="width240" placeholder="请输入推荐理由" size="small" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import Title from '@/components/Title';
import selectWithUserLoad from '@/components/Common/selectWithUserLoad';
import { cooperationOption, scheduleOption } from '@/utils/accountCommonData';
import { getDepartmentAll } from '@/api/config';
import { mapState } from 'vuex';
import math from '@/utils/math';

export default {
  components: { Title, selectWithUserLoad },
  model: {
    prop: 'paramsObj',
    event: 'change'
  },
  props: {
    paramsObj: {
      type: Object,
      default() {
        return {
          shareRatio: ''
        };
      }
    }
  },
  data() {
    return {
      cooperationOption,
      scheduleOption,
      rules: {
        'reason': [{ required: true, message: '请输入推荐理由', trigger: 'blur' }]
      },
      deptTreeList: []
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  created() {
    this.queryDeptTreeList();
  },
  methods: {
    // 获取部门
    queryDeptTreeList() {
      getDepartmentAll().then(res => {
        this.deptTreeList = (res && res.data) || [];
      }).catch(e => {
        console.log(e);
      });
    },
    proposerChange(data) {
      this.paramsObj.agentId = data.id;
      this.paramsObj.agent = data.userName;
      this.paramsObj.avatar = data.avatar;
    },
    numberInputChange(text, prop) {
      let str;
      str = text.replace(/[^\d.]/g, '');
      str = str.replace(/^0+(\d)/, '$1'); // 第一位0开头，0后面为数字，则过滤掉，取后面的数字
      str = str.replace(/\./g, ''); // 数量只允许输入0和正整数
      str = str === '' ? null : str;
      this.paramsObj[prop] = Number(str);
      if (prop === 'shareRatio') {
        this.paramsObj.talentSharingRatio = math.subtract(100, Number(this.paramsObj.shareRatio));
      }
    },
    numInputChange(text, prop) {
      text = text.replace(/[^\d.]/g, '');
      text = text.replace(/\.{2,}/g, '.'); // 连续两个小数点 replace为.
      text = text.replace(/^\./g, '0.'); // 已点为开头 replace为 0.
      text = text.replace(/^(\d*)\.(\d*)\./g, '$1.$2');// 不连续点点 删掉
      text = text.replace(/^0[^\.]+/g, '0'); // 连续多个0 replace为1个0
      text = text.replace(/^(\-?\d+)\.(\d\d).*$/, '$1.$2'); // 只允许保留小数点后2位
      text = text === '' ? null : text;
      this.paramsObj[prop] = text;
    },
    validateForm(validate = true, index = 0) {
      return new Promise((resolve, reject) => {
        if (validate) {
          this.$refs.signUpForm.validate(valid => {
            if (valid) {
              resolve(valid);
            } else {
              reject(index);
            }
          });
        } else {
          resolve(true);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.width240 {
  width: 240px;
}
</style>
